<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas 圆形进度条</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body{
      text-align: center;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="500" style="background: #000;"></canvas>

  <script>
    window.onload = function() {
      let canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'), // 创建二维画布
          centerX = canvas.width / 2,
          centerY = canvas.height / 2,
          rad = Math.PI * 2 / 100, // 将360度分成100份，每一份为rad度
          speed = 0.1; // 加载画圆的速度

      // 绘制5像素宽的外圈
      function blueCircle(n) {
        context.save()
        context.strokeStyle = '#fff'; // 设置描边样式
        context.lineWidth = 5; // 设置线宽
        context.beginPath() // 路径开始
        context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false)
        context.stroke() // 绘制
        context.closePath() // 结束路径
        context.restore()
      }

      // 绘制白色的外圈
      function whiteCircle() {
        context.save()
        context.beginPath()
        context.lineWidth = 2;
        context.strokeStyle = 'red';
        context.arc(centerX, centerY, 100, 0, Math.PI * 2, false)
        context.stroke() // 绘制
        context.closePath() // 结束路径
        context.restore()
      }
      
      // 绘制百分比文字
      function text(n) {
        context.save() // save 和 restore 可以保证样式属性只运用于该段canvas元素
        context.strokeStyle = '#fff';
        context.font = '40px Arial'
        // 绘制字体
        context.strokeText(n.toFixed(0) + '%', centerX - 25, centerY + 10)
        context.stroke()
        context.restore()
      }

      // 循环画圆
      (function drawFrame() {
        window.requestAnimationFrame(drawFrame)
        context.clearRect(0, 0, canvas.width, canvas.height)
        whiteCircle()
        text(speed)
        blueCircle(speed)
        if (speed > 100) speed = 0;
        speed += 0.1
      })()
    }
  </script>
</body>
</html>
